<template>
  <cjui-page-panel :isPure="true" class="h-full relative">
    <MapBackground>
      <CjuiViewScale :d-width="1450" :d-height="625">
        <NavTabs
          title="中国地图飞行图"
          :current-nav="state.nav"
          :nav-options="state.navOptions"
          :current-year="state.year"
          :year-options="state.yearOptions"
          @update-nav="updateNav"
          @update-year="updateYear"
        />

        <AreaMap v-if="state.nav === 'AreaMap'" class="china-map" :key="state.year" />
        <LinesMap v-if="state.nav === 'LinesMap'" class="china-map" :key="state.year" />
      </CjuiViewScale>
    </MapBackground>
  </cjui-page-panel>
</template>

<script lang="ts" setup>
import MapBackground from './components/MapBackground.vue'
import NavTabs from './components/NavTabs/index.vue'
import AreaMap from './components/AreaMap.vue'
import LinesMap from './components/LinesMap.vue'

const state = reactive({
  nav: 'LinesMap',
  navOptions: [
    { label: '区域分布图', value: 'AreaMap' },
    { label: '区域分析图', value: 'LinesMap' }
  ],
  year: 'all',
  yearOptions: [
    { label: '全部', value: 'all' },
    { label: '2024', value: '2024' },
    { label: '2023', value: '2023' } 
  ]
})
function updateNav(value: string) {
  state.nav = value
}
function updateYear(value: string) {
  state.year = value
}
</script>

<style lang="scss" scoped>
.nav-tabs {
  width: 0;
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  z-index: 2;
}

.china-map {
  width: 100%;
  height: 100%;
}
</style>
